<template>
  <div class="app-container" style="width: 86%;margin: 0px auto">
    <div style="border-bottom: 1.5px #cec5c5 solid;"> <h2 style="text-align: center;">{{essayTitle}}</h2></div>
    <div v-for="(val,index) in englishList " ref="singleTable">
        <div style="margin-left: 16px" class="lineStyle">
          <span v-html="englishList[index]"></span>
        </div>
        <div v-show="showinput" class="lineStyle">
          <input size="medium" class="el-input__inner" @keyup.enter="EnterPress" name="wordinput" @input="test(index)" :ref="'mark' + index" :maxlength="rowLen" v-model="englishList2[index]" :key="index"></input>
        </div>
    </div>
    <div v-show="!showinput" class="chineseClass">
      {{essayChinese}}
    </div>
  </div>
</template>

<script>
import {getEssay} from "@/api/tools/essay";

export default {
  name: "dictationEssay",
  data() {
    return {
      essayTitle:"",
      essayEnglish:"",
      englishList:[],
      englishList2:[],
      rowLen:0,
      essayChinese:"",
      showinput: true,
    };
  },
  created() {
    const essayId = this.$route.params && this.$route.params.id;
    this.getEssay(essayId);
  },
  methods: {
    getEssay(essayId) {
      getEssay(essayId).then(response => {
        this.essayTitle = response.data.essayTitle;
        this.essayEnglish = response.data.essayEnglish;
        this.englishList = response.data.englishList;
        this.rowLen = response.data.rowLen;
        this.essayChinese = response.data.essayChinese;
      });
    },
    test(index) {
       let modelWord =  this.englishList[index];
       let  readWord = this.englishList2[index];
       modelWord = modelWord.replace(/<[^>]+>/g, '');
       const readLength = readWord.length;
       const modelLength = modelWord.length;
       const size = readLength > modelLength ? modelLength : readLength;
       let sybf = "";
       // 防止数组越界, 但是前端似乎没必要这么写
       if (modelLength > readLength) {
         sybf = modelWord.substring(readLength);
         modelWord = modelWord.substring(0,readLength);
       }
       let zhjg = "";
       for(let i = 0; i < size; i++) {
         if (readWord[i] == modelWord[i]) {
           zhjg = zhjg + "<span style='color: #1e9352'>"+ modelWord[i] +"</span>";
         } else {
           zhjg = zhjg + "<span style='color: red'>"+ modelWord[i] +"</span>"
         }
       }
      this.englishList[index] = zhjg + sybf;
       if(readLength > modelLength) {
         this.englishList2[index] = readWord.substring(0,modelLength);
       }
    },
    EnterPress(e) {
      const inputs = document.getElementsByName('wordinput'); // inputs 里存放了所有name为input的html元素
      inputs.forEach((input, index) => {
        if (e.currentTarget === input) {
          // 通过循环判断来获取当前输入框的index下标，进行相关操作
          if(index !==  (inputs.length - 1)) {
            inputs[index + 1].focus();
          } else {
            this.showinput = false;
          }
        }
      })
    },
  }
};
</script>
<style>
.lineStyle {
  padding-top: 8px;
  text-align: left;
  line-height: inherit;
  font-size: x-large;
}
/*.el-input__inner {*/
/*  height:36px!important;*/
/*  font-size:x-large;*/
/*}*/
.chineseClass {
  padding: 8px;
  width: 86%;
  margin-top: 24px;
  margin-left: 16px;
  border: 1.5px dashed #9e96aa;
  line-height: 26px;
  color: #558464;
  margin-bottom: 20px;
  font-size: 18px;
}
</style>
